<template>
  <view class="page page-grey page-aftersale-search">
    <view class="page-fixed-top">
      <view class="page-search">
        <fui-search-bar v-model="searchValue" placeholder="搜索订单" searchText="" height="64" paddingTb="0" paddingLr="0" :cancel="false" :isLeft="true" radius="36" searchColor="#FFB703" @blur="searchCenter"></fui-search-bar>
        <fui-button width="100rpx" height="52rpx" radius="72rpx" size="28" @click="searchCenter">搜索</fui-button>
      </view>
      <view class="page-filter" @click="handleShowFilter">
        <image class="page-filter-icon" src="/static/images/filter.png"></image>
        <fui-text text="筛选" size="20" color="#333"></fui-text>
      </view>
    </view>
    <view class="page-content">
      <list-items :searchForm="searchForm"></list-items>
    </view>

    <!-- 筛选弹窗 -->
    <page-modal ref="filterRef" title="订单筛选" :showFooter="false" :showCloseBtn="true">
      <view class="filter-panel">
        <view class="filter-panel-title"><fui-text text="下单时间" size="28" fontWeight="bold" color="#333"></fui-text></view>
        <view class="filter-panel-content">
          <view class="filter-tags space-between">
            <fui-tag v-for="item in AFTERSALE_FILTER_TIME" :key="item.code" :text="item.name" radius="36" :background="filterForm.orderTime == item.code ? '#dbe5ff' : '#f6f6f6'" :padding="['18rpx', '36rpx']" size="28" color="#333" @click="handleCheckTag('orderTime', item.code)"></fui-tag>
          </view>
          <view class="filter-times">
            <view class="filter-time" @click="handleShowDatePicker('startTimeText')">
              <fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="起始时间" v-model="filterForm.startTimeText" disabled></fui-input>
            </view>
            <view class="filter-divider"><fui-text text="-" size="28" fontWeight="bold" color="#333"></fui-text></view>
            <view class="filter-time" @click="handleShowDatePicker('endTimeText')">
              <fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="终止时间" v-model="filterForm.endTimeText" disabled></fui-input>
            </view>
          </view>
        </view>
      </view>
      <view class="filter-panel">
        <view class="filter-panel-title"><fui-text text="售后类型" size="28" fontWeight="bold" color="#333"></fui-text></view>
        <view class="filter-panel-content">
          <view class="filter-tags">
            <fui-tag v-for="item in AFTERSALE_FILTER_TYPE" :key="item.code" :text="item.name" radius="36" :background="filterForm.aftersaleType == item.code ? '#dbe5ff' : '#f6f6f6'" :padding="['18rpx', '28rpx']" size="28" color="#333" @click="handleCheckTag('aftersaleType', item.code)"></fui-tag>
          </view>
        </view>
      </view>
      <view class="filter-panel">
        <view class="filter-panel-title"><fui-text text="售后状态" size="28" fontWeight="bold" color="#333"></fui-text></view>
        <view class="filter-panel-content">
          <view class="filter-tags space-between">
            <fui-tag v-for="item in AFTERSALE_FILTER_STATUS" :key="item.code" :text="item.name" radius="36" :background="filterForm.aftersaleStatus == item.code ? '#dbe5ff' : '#f6f6f6'" :padding="['18rpx', '36rpx']" size="28" color="#333" @click="handleCheckTag('aftersaleStatus', item.code)"></fui-tag>
          </view>
        </view>
      </view>
      <view class="filter-footer">
        <fui-button text="重置" height="78" background="#dbe5ff" color="var(--fui-color-primary)" @click="onResetFilter"></fui-button>
        <fui-button text="确认" height="78" @click="onConfirmFilter"></fui-button>
      </view>

      <fui-date-picker :show="onShowDatePicker" type="5" :value="defaultDateTime" @change="onChangeDate" @cancel="onCancelDate"></fui-date-picker>
    </page-modal>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { AFTERSALE_FILTER_TIME, AFTERSALE_FILTER_TYPE, AFTERSALE_FILTER_STATUS } from './consts'
import utils from '@/components/firstui/fui-utils'
import listItems from './items'
import PageModal from '@/components/modal'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

// 查询条件
const searchForm = ref({
  status: '11'
})
const searchValue = ref('')
const searchCenter = () => {
  searchForm.value.name = searchValue.value
}

// 筛选条件
const filterRef = ref(null)
const filterForm = ref({})
const handleShowFilter = () => {
  filterRef.value.show()
}
const onConfirmFilter = () => {
  filterRef.value.close()
  searchForm.value = {
    ...searchForm.value,
    ...filterForm.value
  }
}
const onResetFilter = () => {
  filterForm.value = {}
}

// 标签选择
const handleCheckTag = (field, value) => {
  if (filterForm.value[field] && filterForm.value[field] === value) {
    filterForm.value[field] = ''
  } else {
    filterForm.value[field] = value
  }
}

// 下单时间
const defaultDateTime = utils.dateFormatter(new Date(), 'y-m-d h:i', 4)
const onShowDatePicker = ref(false)
const curDateFiled = ref('')
const handleShowDatePicker = (field) => {
  curDateFiled.value = field
  onShowDatePicker.value = true
}
const onChangeDate = (e) => {
  filterForm.value[curDateFiled.value] = e ? `${e.year}/${e.month}/${e.day} ${e.hour}:${e.minute}` : ''
  onShowDatePicker.value = false
}
const onCancelDate = () => {
  onShowDatePicker.value = false
}
</script>

<style lang="scss" scoped>
.page-aftersale-search {
  .page-fixed-top {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 36rpx;
    .page-search {
      position: relative;
      flex: 1;
      overflow: hidden;
      border: 3rpx solid var(--fui-color-primary);
      border-radius: 36rpx;
      .fui-search__bar-wrap {
        padding-right: 100rpx !important;
      }
      .fui-button__wrap {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 10;
        transform: translate(-8rpx, -50%);
      }
    }
    .page-filter {
      flex-shrink: 0;
      margin-left: 20rpx;
      line-height: 0;
      .page-filter-icon {
        display: block;
        width: 36rpx;
        height: 36rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .page-content {
    padding: 140rpx 36rpx 36rpx;
  }
  ::v-deep .ui-modal-header {
    margin-bottom: 30rpx;
    .ui-modal-title {
      flex: 1;
      text-align: center;
    }
  }
  .filter-panel {
    margin-bottom: 30rpx;
    .filter-panel-title {
      margin-bottom: 10rpx;
    }
    .filter-panel-content {
      .filter-tags {
        display: flex;
        flex-wrap: wrap;
        &.space-between {
          justify-content: space-between;
        }
        ::v-deep .fui-tag__wrap {
          margin: 10rpx !important;
          font-weight: bold;
        }
      }
      .filter-times {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .filter-divider {
          margin: 0 28rpx;
        }
        .filter-time {
          border-radius: 38rpx;
          background-color: #f6f6f6;
          margin: 10rpx !important;
          padding: 0 24rpx;
          ::v-deep .fui-input__wrap {
            height: 64rpx;
            background-color: transparent !important;
            .fui-input__self {
              text-align: center !important;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
  .filter-footer {
    display: flex;
    padding: 32rpx 0;
    ::v-deep .fui-button__wrap {
      &:nth-child(1) {
        .fui-button {
          height: 78rpx;
          border-radius: 40rpx 0rpx 0rpx 40rpx !important;
        }
      }
      &:nth-child(2) {
        .fui-button {
          height: 78rpx;
          border-radius: 0rpx 40rpx 40rpx 0rpx !important;
        }
      }
    }
  }
}
</style>